<template>
  <a-modal :title="title" :width="width" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" rowKey="id" size="middle">
    <a-spin :spinning="confirmLoading">
      <a-table :columns="columns" :data-source="dataSource" :pagination="false" :row-selection="rowSelection"> </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { getAction, httpAction } from '@/api/manage'
import JCodeEditor from '@/components/jeecg/JCodeEditor.vue'
import convertEditModal from './ConvertEditModal.vue'

export default {
  name: 'propertyDataModal',
  components: { JCodeEditor, convertEditModal },
  data() {
    return {
      title: '设备数据节点',
      width: 800,
      visible: false,
      confirmLoading: false,
      selectedRows: [],
      columns: [
        {
          title: '数据key',
          dataIndex: 'key',
          width: 80
        },
        {
          title: '数据名称',
          dataIndex: 'name',
          width: 100,
          scopedSlots: { customRender: 'dataNameSlot' }
        },
        {
          title: '数据类型',
          dataIndex: 'type',
          width: 80,
          scopedSlots: { customRender: 'dataTypeSlot' }
        },
        {
          title: '数据转换',
          dataIndex: 'convert',
          width: 280,
          scopedSlots: { customRender: 'dataConverSlot' }
        }
      ],
      dataSource: [],
      url: {
        list: ''
      }
    }
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows = JSON.parse(JSON.stringify(selectedRows)).map(row => {
            delete row.typeOptions
            console.log(row.name)
            return row
          })
          console.log('selectedRows: ', this.selectedRows)
        },
        getCheckboxProps: record => ({
          props: {}
        })
      }
    }
  },
  watch: {},
  methods: {
    handlerInput(index, item, $event) {
      this.dataSource[index][item] = $event.target.value
      this.$emit('input', $event.target.value)
      for (let i in this.selectedRows) {
        if (this.selectedRows[i].index === index) {
          this.selectedRows[i][item] = $event.target.value
        }
      }
    },
    convertEditModalOk(index, convert) {
      console.log(index, convert)
      this.$nextTick(function() {
        this.dataSource[index].convert = convert
      })
    },
    converEditHandle(value, index) {
      console.log(value, index)
      this.$refs.convertEditModal.setEditer(index, value)
    },
    dataTypeChange(value, index) {
      console.log(value, index)
      this.$nextTick(function() {
        this.dataSource[index].type = value
        this.dataSource[index].convert = this.dataSource[index].typeOptions.filter(option => option.value === value)[0].convert
      })
    },
    getProperty(modelId) {
      let scoped = this
      console.log('getProperty')
      getAction('device/property/listReadByModel', { modelId: modelId }).then(data => {
        if (data.success) {
          scoped.dataSource = (data.result || []).map(prop => {
            return {
              key: prop.code,
              name: prop.name,
              type: prop.type,
              convert: JSON.stringify(JSON.parse(prop.valueType))
            }
          })
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$emit(
        'ok',
        this.selectedRows.map(row => {
          row['source'] = 'property'
          row['convert'] = JSON.parse(row['convert'])
          return row
        })
      )
      this.visible = false
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped></style>
